<template>
  <div class="order-right">
    <div class="orderId">
        <h2>订单详情</h2>
        <div class="id-button">
            <em>订单号：1231243243545657</em>
            <button>联系客服</button>
        </div>
    </div>
    <div class="hr"></div>
    <div class="orderStatus">
        <h2>下单成功</h2>
        <div class="">
            <el-steps align-center="true" :active="3" finish-status="success">
                <el-step title="未付款"></el-step>
                <el-step title="已付款"></el-step>
                <el-step title="已发货"></el-step>
                <el-step title="已收货"></el-step>
                <el-step title="退货中"></el-step>
                <el-step title="已退货"></el-step>
                <el-step title="已取消"></el-step>
            </el-steps>
        </div>
        <div class="goods-list">
            <div class="goods"  v-for="(index) in 1" :key="index">
                <img src="../images/shoes.jpg"/>
                <span>韩范四号床大美女简约可爱黄色白色洞洞鞋-36码</span>
                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                <span>999元 x 1</span>
            </div>
        </div>
        
    </div>
    <div class="hr"> </div>
    <div class="receiveInfo">
        <h2>收货信息</h2>
        <div class="info">
            <p><em class="key">姓&emsp;&emsp;名：</em>shuang</p>
            <p><em class="key">联系电话：</em>121212687987</p>
            <p><em class="key">收货地址：</em>广州番禺职业技术学院</p>
        </div>
    </div>
    <div class="hr"> </div>
    <div class="payMeth">
        <h2>支付方式</h2>
        <p>支付方式：在线支付</p>
    </div>
    <div class="hr"> </div>
    <div class="price" >
        <div class="pay">
            <p><em class="key">价格总价：</em>         <em class="value">999元</em></p>
            <p><em class="key">运&emsp;&emsp;费：</em><em class="value">0元</em></p>
            <p style="height:60px; line-height: 100%;"><em class="key">应付金额：</em>         <em class="value whole-value">999元</em></p>
        </div>
    </div>
    <div class="hr" style="margin-top:130px;"> </div>
     <!--猜你喜欢-->
     <div class="like">
      <h4 class="kt">猜你喜欢</h4>
      <ul class="like-list">
        <li class="likeItem">
          <div class="p-img">
            <img src="../images/itemlike01.png" />
          </div>
          <div class="attr">
            <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
          </div>
          <div class="price">
            <em>¥</em>
            <i>3699.00</i>
          </div>
          <div class="commit">已有6人评价</div>
        </li>
        <li class="likeItem">
          <div class="p-img">
            <img src="../images/itemlike02.png" />
          </div>
          <div class="attr">
            Apple苹果iPhone 6s/6s Plus 16G 64G 128G
          </div>
          <div class="price">
            <em>¥</em>
            <i>4388.00</i>
          </div>
          <div class="commit">已有700人评价</div>
        </li>
        <li class="likeItem">
          <div class="p-img">
            <img src="../images/itemlike03.png" />
          </div>
          <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
          <div class="price">
            <em>¥</em>
            <i>4088.00</i>
          </div>
          <div class="commit">已有700人评价</div>
        </li>
        <li class="likeItem">
          <div class="p-img">
            <img src="../images/itemlike04.png" />
          </div>
          <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
          <div class="price">
            <em>¥</em>
            <i>4088.00</i>
          </div>
          <div class="commit">已有700人评价</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { mapState } from "vuex";
export default {

  computed: {
    // 计算仓库属性
    ...mapState({
      // orderList: (state) => state.order.orderList,
      orderDetail: (state) => state.order.orderDetail,
    }),
  },
  mounted() {
    //根据用户id获取订单列表
    // this.$store.dispatch("getOrderListByUserId");
    //根据订单id获取订单详情
    this.$store.dispatch("getOrderDetailByOrderId",{oid:23});
  },
}
</script>

<style lang="less" scoped>
.order-right{
    // margin: 20px;
    // padding: 30px;
    h2{
        display: flex;
        flex-direction: row;
        justify-self: start;
        color: #8f9194;
        height: 50px;
        align-items:center ;  
    }
}
    /* 分隔线 */
.hr {
    height: 1px;
    background-color: #ddd;
    margin: 15px 30px;
}

.orderId{
    margin: 0 30px;
    display: flex;
    flex-direction: column;
    height: 90px;
    h2{
        justify-self: start;
        height: 70px;
        align-items:center ;
    }
    .id-button{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        button{
            width: 80px;
            height: 30px;
            background-color: white;
            border: 1px solid #ddd;
            font-size: 0.8em;
        }
    }
}

.orderStatus{
    margin: 0 30px;
    display: flex;
    flex-direction: column;
    h2{
        color: orange;
    }
    .goods-list{
        margin: 40px 30px 0px 20px;
        .goods{
            margin-top: 5px;
            height: 110px;
            display: flex;
            flex-direction: row;
            border: 1px solid #ddd;
            align-items: center;
            img{
                height: 100px;
                border: 1px solid #ddd;
                margin-left: 5px;
            }
            span{
                line-height: 100px; 
                margin-left: 30px;
                font-size: 1.2em;
            }
        }
    }
}
.receiveInfo{
    
    margin: 0 30px;
    .info{
        display: flex;
        flex-direction: column;
        p{
            display: flex;
            flex-direction: row;
            justify-self: start;
            height: 25px;  

            .key{
                font-weight: 600;
            }
        }
    }
}
.payMeth{
    
    margin: 0 30px;
    p{
            display: flex;
            flex-direction: row;
            justify-self: start;
            height: 25px; 
    }
}

.price{
    
    width: 100%;
    .pay{
        margin: 0 30px;
        float: right;
        width: 200px;
        p{
            display: inline-block;
            height: 30px;
            line-height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .value{
                color: red;
            }
            .whole-value{
                font-size: 1.6em;
            }
        }
    }
}
// 猜你喜欢
.like {
          border: 1px solid #ddd;
          margin: 30px 20px;

          .kt {
            border-bottom: 1px solid #ddd;
            background: #f1f1f1;
            color: #666;
            margin: 0;
            padding: 12px;
            font-size: 15px;
          }

          .like-list {
            padding: 15px 11px;
            overflow: hidden;

            .likeItem {
              width: 25%;
              float: left;

              .p-img {
                text-align: left;

                img {
                  width: 167px;
                  height: 123px;
                }
              }

              .attr {
                padding: 0 15px;
              }

              .price {
                padding: 0 15px;
                font-size: 16px;
                color: #c81623;
                margin-bottom: 20px;
              }

              .commit {
                padding: 0 15px;
              }
            }
          }
        }
</style>